<template>
  <div>
    <el-menu v-if="userStore.token" mode="horizontal" :ellipsis="false" router>
      <el-sub-menu index="1">
        <template #title>基础档案</template>
        <el-menu-item index="/user">用户管理</el-menu-item>
        <el-menu-item v-if="userStore.isAdm" index="/dseclass">班级管理</el-menu-item>
        <el-menu-item v-if="userStore.isAdm" index="/course">课程开设</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>课表管理</template>
        <el-menu-item v-if="userStore.isAdm" index="/scheduletemplate">课表计划</el-menu-item>
        <el-menu-item v-if="userStore.isAdm" index="/scheduleforclass">班级课表</el-menu-item>
        <el-menu-item index="/scheduleforteacher">教师课表</el-menu-item>
        <el-menu-item v-if="userStore.isAdm" index="/moveschedule">调班调休</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>报表</template>
        <el-menu-item index="/tableExport">排班明细</el-menu-item>
        <el-menu-item index="/sumExport">排班统计</el-menu-item>
        <el-menu-item index="/diffExport">差异明细</el-menu-item>
      </el-sub-menu>
      <div style="flex-grow: 1"></div>
      <el-sub-menu index="4" class="no-arrow">
        <template #title>
          <el-avatar :size="52" shape="square">{{ userStore.userName }}</el-avatar>
        </template>
        <el-menu-item index="/my">个人中心</el-menu-item>
        <el-menu-item index="/logout">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div v-if="!$route.meta.hideMenu" style="padding: 8px">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive" />
      </router-view>
    </div>
    <div v-else>
      <router-view v-slot="{ Component }">
        <component :key="$route.name" :is="Component" />
      </router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useUserStore } from './stores/user'
const userStore = useUserStore()
</script>
<style>
.no-arrow > .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none !important;
}
</style>
